<template>
  <div id="detection">
    <div>
      <el-button type="primary" icon="HelpFilled" style="margin-bottom: 10px;" @click="CheckLine()">检测设备状态</el-button>
    </div>
    <div class="DeviceCon">
      <div class="DeviceMain">
        <div class="DeviceInfo" v-for="(item, index) in DeviceList" style="cursor: pointer;" @click="getlinelist(item)">
          <img style="width: 80%;" :src="item.online == 1 ? './img/1bb.png' : './img/1bblk.png'" alt="">
          <div style="color: white;display: flex;flex-direction: column;align-items: center;">
            <div>{{ item.name }}</div>
            <div>{{ item.ip }}</div>
          </div>
          <div>
            <el-button v-if="item.online == 1" type="success" icon="List" @click="PingDevice(item)">{{ item.ip }}</el-button>
            <el-button v-else type="info" icon="List" @click="PingDevice(item)">{{ item.ip }}</el-button>            
          </div>
        </div>
      </div>
    </div>
    <!-- Trapped in time -->
    <el-dialog v-model="StateShow" align-center title="设备运行状态" width="800">
      <div class="state">
        <el-table id="out" :data="linelist" border stripe style="width: 100%">
          <el-table-column align="center" type="index" label="序号" width="60" />
          <el-table-column label="名称" width="200">
            <template #default="scope">
              {{ scope.row.infoBoardDevice.name }}
            </template>
          </el-table-column>
          <el-table-column label="状态" width="80">
            <template #default="scope">
              {{ scope.row.online ? '在线' : '离线' }}
            </template>
          </el-table-column>
          <el-table-column prop="ip" label="IP地址" width="160" />
          <el-table-column prop="gmt_create" label="记录时间" />
        </el-table>
        <pagination style="margin-top: 10px;" @sendsize="getsize" @sendpage="getpage" :page="page"></pagination>
      </div>
      <template #footer>
        <div>
          <el-button size="default" type="primary" icon="Printer" @click="exportExcel('设备在线记录')">导出</el-button>
          <el-button size="default"  icon="Close" @click="StateShow = false">关闭</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from 'vue';
import FileSaver from "file-saver";
import * as XLSX from 'xlsx';
import $sys from '../../api/sys';
import { ElMessage } from 'element-plus';
import { mainStore } from "../../store/index";
import pagination from '../../components/pagination.vue';
import * as ElementPlusIconsVue from '@element-plus/icons-vue';

const page = reactive({
  pagenum: 1,
  pagesize: 10,
  total: 0
})
const $store = mainStore();
const DeviceList = ref([]);
const StateList = ref([]);
const StateShow = ref(false);
onMounted(() => {
  getDeviceList();
})
const exportExcel = (title) => {
  var wb = XLSX.utils.table_to_book(
    document.querySelector("#out")
  );
  var wbout = XLSX.write(wb, {
    bookType: "xlsx",
    bookSST: true,
    type: 'array',
  });
  try {
    FileSaver.saveAs(
      new Blob([wbout], { type: 'application/octet-stream' }),
      title + ".xlsx"
    );
  } catch (e) {
    if (typeof console !== 'undefined') console.log(e, wbout);
  }
  return wbout;
};
const linelist = ref([]);
function getsize(e) {
  page.pagesize = e;
  let obj = {};
  obj.id = DeviceId.value;
  getlinelist(obj);
}
function getpage(e) {
  page.pagenum = e;
  let obj = {};
  obj.id = DeviceId.value;
  getlinelist(obj);
}
const DeviceId = ref('');
function getlinelist(e) {
  DeviceId.value = e.id;
  page.device_id = e.id;
  $sys.getLineHis(page).then(res => {
    if (res.code == 200) {
      linelist.value = res.data.result;
      page.total = res.data.count;
      StateShow.value = true;
    }
  })
}
function getDeviceList() {
  $sys.deviceList().then(res => {
    if (res.code == 200) {
      //console.log(111,res.data);
      DeviceList.value = res.data;
    }
  })
}
function PingDevice(item) {
  $sys.pingInfoBoard(item.id).then(res => {
    if (res.code == 200) {
      console.log(111,res.data);
      if (res.data) {
        ElMessage({
          message: '设备在线!',
          type: 'success'
        })
      } else {
        ElMessage({
          message: '设备不在线!',
          type: 'error'
        })
      }
    }
  })
}
function CheckLine() {
  ElMessage({
        message: '正在进行设备通信状态检测，请稍等...',
        type: 'success'
      })
  $sys.checkIsOnline().then(res => {
    if (res.code == 200) {
      $sys.devicecount().then(res => {
        if (res.code == 200) {
          $store.total = res.data.total;
          $store.online = res.data.online;
          $store.offline = res.data.offline;
        }
      })
      ElMessage({
        message: '操作成功!',
        type: 'success'
      })
      getDeviceList();
    }
  })
}
</script>

<style scoped>
#detection {}

.DeviceCon {

  height: 700px;
  overflow: auto;
}

.DeviceCon::-webkit-scrollbar {
  width: 5px;
}

.DeviceCon::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 设置滚动条的颜色 */
  border-radius: 6px;
  /* 设置滚动条的圆角 */
}

.DeviceCon::-webkit-scrollbar-track {
  background-color: #888;
  border-radius: 6px;
  /* 设置滚动条的轨道颜色 */
}

.DeviceMain {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.DeviceInfo {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  background-color: #2F4052;
  width: 10%;
  height: 220px;
  padding: 5px;
  border-radius: 5px;
  margin-right: 10px;
  margin-bottom: 10px;
}

:deep(.el-dialog) {
  background-color: #2F4052 !important;
}

:deep(.el-dialog__title),
:deep(.el-dialog__body) {
  color: white !important;
}

.state {
  max-height: 500px;
}

.state::-webkit-scrollbar {
  width: 5px;
}

.state::-webkit-scrollbar-thumb {
  background-color: #ccc;
  /* 设置滚动条的颜色 */
  border-radius: 6px;
  /* 设置滚动条的圆角 */
}

.state::-webkit-scrollbar-track {
  background-color: #888;
  border-radius: 6px;
  /* 设置滚动条的轨道颜色 */
}
</style>

<style lang='less'>
.state .el-table--border:after {
  background-color: #222e3b !important;
}

.el-table th.el-table__cell.is-leaf {
  border-bottom: 1px #222e3b solid !important;
}

.state .el-table__cell {
  border-color: #222e3b !important;
}

.el-scrollbar__view {
  background: #304053;
  border-bottom: 1px #222e3b solid !important;
}

.state {
  .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background: none;
  }

  .el-table__inner-wrapper {
    &::before {
      display: none;
    }
  }

  // 头部样式
  .el-table__header-wrapper th {
    background-color: #2F4052;
    color: #fff;
  }

  // 内容行样色
  .el-table__row {
    background-color: #2F4052;
    color: #B2C9EE;
  }

  // 内容行边框
  .el-table__cell {
    border: 1 !important;
    border-color: #222e3b;
  }

  .el-table--border .el-table__inner-wrapper:after,
  .el-table--border:after,
  .el-table__border-left-patch {
    background-color: #222e3b;
  }

  //自定义斑马线和鼠标移入样式
  .el-table--enable-row-hover .el-table__body tr:hover:nth-child(even)>td {
    background-color: #263343 !important;
  }

  .el-table--enable-row-hover .el-table__body tr:hover:nth-child(odd)>td {
    background-color: #2F4052 !important;
  }

  .el-table__body tr:nth-child(even) {
    background-color: #263343;
    /* 偶数行（斑马线）的默认背景色 */
  }

}
</style>